<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VUE第四天 组件</title>
</head>
<body>
  <div id="app"> 
    <hr>
    <v-header></v-header>
    <v-header></v-header>
    <v-header></v-header>
    <v-header></v-header>
    <v-header></v-header>
    <component1></component1>
    <v-footer></v-footer>
    <hr>
  </div>
  <script src="../vue.js"></script>
  <script>
    // 写在vue实例外面，叫做全局注册
    Vue.component('vHeader', {
      template: '<mark>hello</mark>'
    })
    let vm = new Vue({
      el: '#app',
      data: {
        
      },
      // 组件的局部注册
      components: {
        'component1':{
          template: `<div>
          我是第一个vue组件<input v-model="name">
          </div>
          `,
          data() {
            return {
              name: 'Jack'
            }
          }
        },
        'vFooter': {
          template: `<div>我今天{{age}}岁了</div>`,
          // 组件中的data需要是一个函数的返回值
          data() {
            return {
              age: 18
            }
          }
        }
      },
      methods: {
        
      },
    })
  </script>
</body>
</html>